<!-- filename: frontend/src/components/SearchResults/SearchResults.vue -->
<template>
  <div class="search-results-container" v-if="results">

    <!-- 【新增】歌单分类 -->
    <div class="category-block" v-if="results.playlists && results.playlists.length">
      <h3 class="category-title">歌单</h3>
      <ul>
        <li v-for="playlist in results.playlists" :key="playlist.name" @click="onItemClick('playlist', playlist)">
          {{ playlist.name }}
        </li>
      </ul>
    </div>

    <!-- 歌曲分类 -->
    <div class="category-block" v-if="results.songs && results.songs.length">
      <h3 class="category-title">歌名</h3>
      <ul>
       <li v-for="song in results.songs" :key="song.id" @click="onItemClick('song', song)">
           <span class="title">{{ song.title }}</span>
           <small class="details">
             {{ song.cover_artists || '' }}
             {{ song.original_artists || '' }}
             {{ formatSongDate(song.cover_date) }}
           </small>
       </li>
      </ul>
    </div>

    <!-- 歌手分类 -->
    <div class="category-block" v-if="results.artists && results.artists.length">
      <h3 class="category-title">歌手</h3>
      <ul>
        <li v-for="artist in results.artists" :key="artist.name" @click="onItemClick('artist', artist)">
          {{ artist.name }}
        </li>
      </ul>
    </div>

    <!-- 状态分类 -->
    <div class="category-block" v-if="results.statuses && results.statuses.length">
      <h3 class="category-title">状态</h3>
      <ul>
        <li v-for="status in results.statuses" :key="status.name" @click="onItemClick('status', status)">
          {{ status.name }}
        </li>
      </ul>
    </div>

    <!-- 语种分类 -->
    <div class="category-block" v-if="results.languages && results.languages.length">
      <h3 class="category-title">语种</h3>
      <ul>
        <li v-for="lang in results.languages" :key="lang.name" @click="onItemClick('language', lang)">
          {{ lang.name }}
        </li>
      </ul>
    </div>

    <!-- 日期分类 -->
    <div class="category-block" v-if="results.dates && results.dates.length">
      <h3 class="category-title">日期</h3>
      <ul>
        <!-- 直接显示格式化后的日期 -->
        <li v-for="date in results.dates" :key="date" @click="onItemClick('date', date)">
           {{ date }}
        </li>
      </ul>
    </div>

    <!-- 歌曲类型分类 -->
    <div class="category-block" v-if="results.song_types && results.song_types.length">
        <h3 class="category-title">类型</h3>
        <ul>
            <li v-for="stype in results.song_types" :key="stype" @click="onItemClick('song_type', { name: stype })">
                {{ stype }}
            </li>
        </ul>
    </div>

  </div>
</template>

<script setup>
defineProps({
  results: Object,
});

const emit = defineEmits(["itemClick"]);

const onItemClick = (type, data) => {
  // data 已经是格式化好的字符串了
  emit("itemClick", { type, data });
};

// 统一后的、正确的代码
function formatSongDate(dateString) {
  if (!dateString) {
    return "";
  }

  // 使用和 SongCard.vue 完全相同的健壮方法
  const parts = dateString.split("-");
  const date = new Date(parts[0], parts[1] - 1, parts[2]);

  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");

  const weekdays = [
    "星期日",
    "星期一",
    "星期二",
    "星期三",
    "星期四",
    "星期五",
    "星期六",
  ];
  const weekday = weekdays[date.getDay()];

  return `${year}-${month}-${day}, ${weekday}`;
}
</script>

<style scoped>
.search-results-container {
  background-color: white;
  border: 1px solid #eee;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 10px;
  margin-top: 8px;
  /* --- 新增的核心样式 --- */
  max-height: 40vh; /* 限制最大高度为视窗高度的40% */
  overflow-y: auto; /* 当内容超出最大高度时，显示垂直滚动条 */
}
.category-block {
  margin-bottom: 15px;
}
.category-title {
  font-size: 16px;
  color: #333;
  margin-bottom: 8px;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
li {
  padding: 8px 5px;
  cursor: pointer;
  border-radius: 4px;
  /* 防止长文本换行 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
li:hover {
  background-color: #f5f5f5;
}
.title {
  font-weight: 500;
}
.details {
  color: #888;
  margin-left: 10px;
}
</style>